<template>
  <div class="app-container">
    <el-form v-model="listQuery" :inline="true">
      <el-form-item>
        <el-button type="primary" @click="getList()">查询</el-button>
        <el-button icon="el-icon-circle-plus-outline" type="primary" @click="openForm('dialogForm', {})">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
    >
      <el-table-column label="ID" prop="id" />
      <el-table-column label="姓名" prop="customer_name" />
      <el-table-column label="手机号" prop="phone" />
      <el-table-column label="邮箱" prop="email" />
      <el-table-column label="余额" prop="balance" />
      <el-table-column label="可交易余额" prop="tradable_balance" />
      <el-table-column label="冻结余额" prop="freeze_balance" />
      <el-table-column label="可取现余额" prop="withdrawal_balance" />
      <el-table-column label="不可取现余额" prop="non_withdrawal_balance" />
      <el-table-column label="操作" width="260">
        <template slot-scope="scope">
          <el-link :underline="false" type="primary" style="margin-right: 10px;" @click="openAddBankDialog(scope.row)">添加银行卡</el-link>
          <el-link :underline="false" type="primary" style="margin-right: 10px;" @click="openTradeAccountDialog(scope.row)">银行卡列表</el-link>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="getList()" />

    <el-dialog
      :title="formTitleMap[formState]"
      :visible="createAccountShow"
      :close-on-click-modal="false"
    >
      <el-form
        ref="dialogForm"
        :model="form"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="客户类型">
          <el-select v-model.number.lazy="form.customer_type" placeholder="请选择客户类型">
            <el-option v-for="(item,key) in customerTypeList" :key="key" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" required>
          <el-input v-model.trim="form.customer_name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select v-model="form.card_type" placeholder="请选择证件类型">
            <el-option v-for="(item,key) in cardTypeList" :key="key" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="证件号" required>
          <el-input v-model="form.card_no" placeholder="请输入证件号" />
        </el-form-item>
        <el-form-item label="手机号" required>
          <el-input v-model="form.phone" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="来源" required>
          <el-input v-model.number="form.source" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createAccountShow = false">取消</el-button>
        <el-button v-if="formState==='create'" type="primary" :loading="formLoading" @click="createAdmin('dialogForm')">立即新增</el-button>
        <el-button v-else type="primary" :loading="formLoading" @click="updateAdmin('dialogForm')">立即更新</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="绑定银行卡"
      :visible="addBankDialogShow"
      :close-on-click-modal="true"
    >
      <el-form
        :model="addBankForm"
        label-position="left"
        label-width="160px"
      >
        <el-form-item label="客户ID" required>
          <el-input v-model.trim="addBankForm.customer_id" />
        </el-form-item>
        <el-form-item label="姓名" required>
          <el-input v-model.trim="addBankForm.customer_name" />
        </el-form-item>
        <el-form-item label="银行卡号" required>
          <el-input v-model.trim="addBankForm.bank_card_no" />
        </el-form-item>
        <el-form-item label="银行编码" required>
          <el-input v-model.trim="addBankForm.bank_kind_no" />
        </el-form-item>
        <el-form-item label="银行户名" required>
          <el-input v-model.trim="addBankForm.bank_payer_name" />
        </el-form-item>
        <el-form-item label="银行卡登记的手机号" required>
          <el-input v-model.trim="addBankForm.bank_phone" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addBankDialogShow = false">取消</el-button>
        <el-button :loading="formLoading" @click="addBankCard('dialogForm')">立即绑卡</el-button>
      </div>
    </el-dialog>

    <el-dialog title="银行卡|交易账号" :visible.sync="tradeAccountDialogShow" width="70%">
      <el-table :data="tradeAccountList">
        <el-table-column property="bank_card_id" label="银行卡ID" width="100" />
        <el-table-column property="bank_card_no" label="银行卡号" width="200" />
        <el-table-column property="bank_kind_no" label="银行编码" width="100" />
        <el-table-column property="bank_phone" label="开户行手机号" />
        <el-table-column property="bank_payer_name" label="银行户名" />
        <el-table-column property="branch_bank_name" label="开户行名称" />
        <el-table-column property="bank_balance" label="银行账户余额" />
        <el-table-column property="trade_account_no" label="交易账号" />
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-link v-if="scope.row.trade_account_no" :underline="false" type="primary" style="margin-right: 10px;" @click="openFundTradeAccountDialog(scope.row)">基金交易账号</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="基金交易账号" :visible.sync="fundTradeAccountDialogShow" width="70%">
      <el-table :data="fundTradeAccountList">
        <el-table-column property="trade_account_no" label="交易账号" />
        <el-table-column property="fund_trade_account_no" label="基金交易账号" />
        <el-table-column property="balance" label="基金账户余额" />
        <el-table-column property="tradable_balance" label="基金账户可交易余额" />
        <el-table-column property="freeze_balance" label="基金账户冻结余额" />
        <el-table-column property="withdrawal_balance" label="基金账户可取现余额" />
        <el-table-column property="non_withdrawal_balance" label="基金账户不可取现余额" />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { customerList, createCustomer, addBankCard, bankCardList, fundTradeAccount } from '@/api/customer'
import { Message, MessageBox } from 'element-ui'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'SettingSystemAdminIndex',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        keyword: '',
        state: null,
        page: 1,
        page_size: 20
      },
      createAccountShow: false,
      formState: 'create',
      formLoading: false,
      formTitleMap: {
        create: '新增账号',
        update: '编辑账号'
      },
      form: {
        customer_type: null,
        customer_name: null,
        card_type: '1',
        card_no: null,
        phone: null,
        source: 9
      },
      addBankForm: {
        customer_id: 1,
        customer_name: '',
        bank_card_no: null,
        bank_kind_no: '',
        bank_payer_name: '',
        branch_bank_name: '',
        bank_phone: ''
      },
      addBankDialogShow: false,
      dialogAccountTableVisible: false,
      tradeAccountDialogShow: false,
      fundTradeAccountDialogShow: false,
      tradeAccountList: [],
      fundTradeAccountList: [],
      customerTypeList: [
        {
          name: '个人',
          value: 1
        }
        // {
        //   name: '机构',
        //   value: 0
        // }
      ],
      cardTypeList: [
        {
          name: '身份证',
          value: '0'
        }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      customerList(this.listQuery).then(res => {
        this.list = res.list
        this.total = res.pager.total
        this.listQuery.page = res.pager.page
        this.listQuery.page_size = res.pager.page_size
      }).catch((res) => {})
      this.listLoading = false
    },
    resetFormData() {
    },
    openForm(formName, row = {}) {
      this.createAccountShow = true
    },
    createAdmin(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.formLoading = true
          createCustomer(this.form).then(res => {
            this.getList()
            this.createAccountShow = false
            Message.success('创建成功')
          }).catch(res => {})
          this.formLoading = false
        } else {
          return false
        }
      })
    },
    openAddBankDialog(row) {
      this.addBankDialogShow = true
      this.addBankForm.customer_id = row.id
      this.addBankForm.customer_name = row.customer_name
      this.addBankForm.bank_payer_name = row.customer_name
      this.addBankForm.bank_phone = row.phone
    },
    addBankCard() {
      this.formLoading = true
      const data = {
        customer_id: this.addBankForm.customer_id,
        bank_card_info: [this.addBankForm]
      }
      addBankCard(data).then(res => {
        this.getList()
        this.addBankDialogShow = false
        Message.success('成功')
      }).catch(res => {})
      this.formLoading = false
    },
    openTradeAccountDialog(row) {
      bankCardList({
        customer_id: row.id,
        page: 1,
        page_size: 100
      }).then(res => {
        this.tradeAccountDialogShow = true
        this.tradeAccountList = res.list
      }).catch(res => {})
    },
    openFundTradeAccountDialog(row) {
      fundTradeAccount({
        trade_account_no: row.trade_account_no,
        page: 1,
        page_size: 100
      }).then(res => {
        this.fundTradeAccountDialogShow = true
        this.fundTradeAccountList = res.list
      }).catch(res => {})
    }
  }
}
</script>

  <style scoped>

  </style>
